import { Collapse, Select, CollapseProps, Button } from "antd";
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
import { getComponentById, useComponentsStore } from "../../stores/components";
import { ComponentEvent as CE, useComponentConfigStore } from "../../stores/component-config";

import { GoToLink, type GoToLinkConfig } from "./actions/GoToLink";
import { ShowMessage, type ShowMessageConfig } from "./actions/ShowMessage";
import { type CustomJsConfig } from "./actions/CustomJs";
import { useState } from "react";
import { ActionModal } from "./ActionModal";
import { ComponentMethodConfig } from "./actions/ComponentMethod";

export const ComponentEvent = () => {
    const { curComponent, curComponentId, updateComponentProps, components } = useComponentsStore();
    const { componentConfig } = useComponentConfigStore();

    const [actionModalOpen, setActionModalOpen] = useState<boolean>(false);
    const [curEvent, setCurEvent] = useState<CE>();
    const [curAction, setCurAction] = useState<GoToLinkConfig | ShowMessageConfig | CustomJsConfig | ComponentMethodConfig>()
    const [curActionIndex, setCurActionIndex] = useState<number>()

    if (!curComponent) return null;

    const selectAction = (eventName: string, value: string) => {
        if (!curComponentId) return;

        updateComponentProps(curComponentId, { [eventName]: { type: value } });
    }

    const handleModalOk = (config?: GoToLinkConfig | ShowMessageConfig | CustomJsConfig | ComponentMethodConfig) => {
        if (!config || !curEvent || !curComponentId) return;

        // 需要判断是新增还是编辑
        if (curAction) {
            updateComponentProps(curComponentId, {
                [curEvent.name]: {
                    actions: curComponent.props[curEvent.name]?.actions.map((item: GoToLinkConfig | ShowMessageConfig | CustomJsConfig, index: number) => {
                        return index === curActionIndex ? config : item
                    })
                }
            })
        } else {
            updateComponentProps(curComponentId, {
                [curEvent.name]: {
                    actions: [
                        ...(curComponent.props[curEvent.name]?.actions || []),
                        config
                    ]
                }
            })
        }
        setCurAction(undefined)
        setActionModalOpen(false)
    }

    const deleteAction = (event: CE, index: number) => {
        if (!curComponent) return;
        const actions = curComponent.props[event.name]?.actions;
        actions.splice(index, 1);

        updateComponentProps(curComponent.id, {
            [event.name]: {
                actions: actions
            }
        })
    }
    const editAction = (event: CE, item: GoToLinkConfig | ShowMessageConfig | CustomJsConfig | ComponentMethodConfig, index: number) => {
        if (!curComponent) return;
        setCurAction(item);
        setCurEvent(event);
        setCurActionIndex(index);
        setActionModalOpen(true);
    }

    const items: CollapseProps['items'] = (componentConfig[curComponent.name].events || []).map(event => {
        return {
            key: event.name,
            label: <div className="flex justify-between leading-[30px]">
                {event.label}
                <Button type="primary" onClick={(e) => {
                    e.stopPropagation();
                    setCurEvent(event);
                    setActionModalOpen(true);
                }}>添加动作</Button>
            </div>,
            children: <div>
                {/*  <div className="flex items-center">
                    <div>动作：</div>
                    <Select className="w-[160px]" options={[
                        { label: '显示提示', value: 'showMessage' },
                        { label: '跳转链接', value: 'goToLink' }
                    ]} 
                    onChange={(value) =>{ selectAction(event.name, value) }}
                    value={curComponent?.props?.[event.name]?.type} />
                </div> */}
                {/* {
                    curComponent?.props?.[event.name]?.type === 'goToLink' && <GoToLink event={event} />
                }
                {
                    curComponent?.props?.[event.name]?.type === 'showMessage' && <ShowMessage event={event} />
                } */}
                {
                    (curComponent.props[event.name]?.actions || []).map((item: GoToLinkConfig | ShowMessageConfig | CustomJsConfig | ComponentMethodConfig, index: number) => {
                        return <div key={index}>
                            {
                                item.type === 'goToLink' ? <div className="border border-[#aaa] m-[10px] p-[10px] relative">
                                    <div className="text-[blue]">跳转链接</div>
                                    <div>{item.url}</div>
                                    <div style={{ position: 'absolute', top: 10, right: 10, cursor: 'pointer' }} onClick={() => { deleteAction(event, index) }}><DeleteOutlined /></div>
                                    <div style={{ position: 'absolute', top: 10, right: 30, cursor: 'pointer' }} onClick={() => { editAction(event, item, index) }}><EditOutlined /></div>
                                </div> : null
                            }
                            {
                                item.type === 'showMessage' ? <div className="border border-[#aaa] m-[10px] p-[10px] relative">
                                    <div className="text-[blue]">消息弹窗</div>
                                    <div>{item.config.type}</div>
                                    <div>{item.config.text}</div>
                                    <div style={{ position: 'absolute', top: 10, right: 10, cursor: 'pointer' }} onClick={() => { deleteAction(event, index) }}><DeleteOutlined /></div>
                                    <div style={{ position: 'absolute', top: 10, right: 30, cursor: 'pointer' }} onClick={() => { editAction(event, item, index) }}><EditOutlined /></div>
                                </div> : null
                            }
                            {
                                item.type === 'customJS' ? <div className="border border-[#aaa] m-[10px] p-[10px] relative">
                                    <div className="text-[blue]">自定义JS</div>
                                    <div style={{ position: 'absolute', top: 10, right: 10, cursor: 'pointer' }} onClick={() => { deleteAction(event, index) }}><DeleteOutlined /></div>
                                    <div style={{ position: 'absolute', top: 10, right: 30, cursor: 'pointer' }} onClick={() => { editAction(event, item, index) }}><EditOutlined /></div>
                                </div> : null
                            }
                            {
                                item.type === 'componentMethod' ? <div key='componentMethod' className="border border-[#aaa] m-[10px] p-[10px] relative">
                                    <div className="text-[blue]">组件方法</div>
                                    <div>{getComponentById(item.config.componentId, components)?.desc}</div>
                                    <div>{item.config.componentId}</div>
                                    <div>{item.config.method}</div>
                                    <div style={{ position: 'absolute', top: 10, right: 10, cursor: 'pointer' }} onClick={() => { deleteAction(event, index) }}><DeleteOutlined /></div>
                                    <div style={{ position: 'absolute', top: 10, right: 30, cursor: 'pointer' }} onClick={() => { editAction(event, item, index) }}><EditOutlined /></div>
                                </div> : null
                            }
                        </div>
                    })
                }
            </div>
        }
    })

    return <div className="px-[10px]">
        <Collapse className="mb-[10px]" items={items} defaultActiveKey={componentConfig[curComponent.name].events?.map(item => item.name)} />
        <ActionModal action={curAction} visible={actionModalOpen} eventConfig={curEvent!} handleOk={handleModalOk} handleCancel={() => { setActionModalOpen(false) }} />
    </div>
}